function clickInput() {
    let inputs = document.querySelectorAll("input")

    inputs.forEach(function(input, index) {
        input.addEventListener("focus", function() {
            input.style.outlineColor = "#00bdff"
        })

    })
}
clickInput()
let input1 = document.querySelector(".input1")
let input2 = document.querySelector(".input2")
let input3 = document.querySelector(".input3")
let input4 = document.querySelector(".input4")

let span1 = document.querySelector(".form-box1")
let span2 = document.querySelector(".form-box2")
let span3 = document.querySelector(".form-box3")
let span4 = document.querySelector(".form-box4")

// let inputs = document.querySelectorAll(".input1")
// inputs.forEach(function(input, index) {
//     input.addEventListener("blur", function() {
//         // console.log("1");
//         // console.log(input.value.length);
//         if (inputs[index].value.length < 6 || input.value.length > 20) {
//             span1.style.display = "block"
//         }
//         if (inputs[index].value.length != 11) {
//             span2.style.display = "block"
//         }
//         if (inputs[index].value.length != 11) {
//             span3.style.display = "block"
//         }
//         if (inputs[index].value.length < 6 || inputs[index].value.length > 12) {
//             span4.style.display = "block"
//         }
//     })
// })
let btn = document.querySelector(".main-box .btn")
let checkboxs = document.querySelector(".main-box .checkbox")


btn.addEventListener("click", function() {
    // console.log("1");
    if (input1.value.length < 6 || input1.value.length > 20) {
        return span1.style.display = "block"
    }
    if (input2.value.length != 11) {
        return span2.style.display = "block"
    }
    if (input3.value.length != 4) {
        return span3.style.display = "block"
    }
    if (input4.value.length < 6 || input4.value.length > 12) {
        return span4.style.display = "block"
    }
    alert("注册成功")
})
checkboxs.addEventListener("click", function() {
    let zhuce = document.querySelector(".checkbox:checked")
    console.log(zhuce);
    if (zhuce) {
        btn.style.backgroundColor = "#00bdff"
        btn.disabled = false
    } else {
        btn.style.backgroundColor = "#aaa"
        btn.disabled = true

    }

})